<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<!-- This test is testing unspecified behavior of using Shadow DOM in <dialog>.
See crbug/383230 and https://github.com/whatwg/html/issue/2393 . -->
<input id="outer">

<dialog id="dlg">
  <div id="host"></div>
  <button id="btn"></button>
</dialog>

<dialog id="dlg2">
  <div id="host2"><input id="inner2"></div>
  <button id="btn2"></button>
</dialog>
<script>
'use strict';

host.attachShadow({mode: 'open'}).innerHTML = '<input id="inner">';
let inner = host.shadowRoot.querySelector('#inner');

test(() => {
  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg.show();
  assert_equals(document.activeElement, host);
  assert_equals(host.shadowRoot.activeElement, inner);
  dlg.close();

  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg.showModal();
  assert_equals(document.activeElement, host);
  assert_equals(host.shadowRoot.activeElement, inner);
  dlg.close();
}, "Dialog focusing steps should be applied to elements inside ShadowRoot.");


host2.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';

test(() => {
  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg2.show();
  assert_equals(document.activeElement, inner2);
  dlg2.close();

  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg2.showModal();
  assert_equals(document.activeElement, inner2);
  dlg2.close();
}, "Dialog focusing steps should be applied to slotted elements in Shadow DOM.");
</script>
